<template>
  <div style="text-align: center">
    <el-transfer
      style="text-align: left; display: inline-block; margin:150px auto"
      v-model="value"
      filterable
      :render-content="renderFunc"
      :titles="['超级管理员', '管理员']"
      :button-texts="['升级', '降级']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
      @change="handleChange"
      @right-check-change="rightCheckChange"
      @left-check-change="LeftCheckChange"
      :data="userList"
    >
      <el-button class="transfer-footer" slot="right-footer" size="small" @click="delRightUser">删除</el-button>
      <el-button class="transfer-footer" slot="left-footer" size="small" @click="delLeftUser">删除</el-button>
      <el-button class="transfer-footer2" slot="right-footer" size="small" @click="dialogFormVisible = true">新增</el-button>
    </el-transfer>
    <!-- 新增modal -->
    <el-dialog title="新增管理员" center :visible.sync="dialogFormVisible" width="40%" @close="cancelAdd">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="addmodal">
        <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass" :label-width="formLabelWidth">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass" :label-width="formLabelWidth">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="sureAddUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import interfaceList from '../../utils/interface'
export default {
  name:'examine',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      userList:[],
      value: [],
      leftCheck:[],
      rightCheck:[],
      renderFunc(h, option) {
        return <span>{ option.label }</span>;
      },
      dialogFormVisible: false,
      formLabelWidth: '200px',
      ruleForm: {
        name: '',
        pass:'',
        checkPass:'',
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        pass: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    getLists(){
      interfaceList.getUserName().then(res => {
        // console.log(res)
        if(res.code === 200) {
          res.userName.forEach(item => {
            this.userList.push({
              key:item.userId,
              label:item.username
            })
            this.value.push(item.userId)
          })
        }
      })
    },
    getSuperLists(){
      interfaceList.getSuperUserName().then(res => {
        // console.log(res)
        if(res.code === 200){
          res.userName.forEach(item => {
            this.userList.push({
              key:item.userId,
              label:item.username
            })
          })
        }
      })
    },
    delRightUser(){
      // console.log(this.rightCheck)
      if(this.rightCheck.length !== 0){
        this.$confirm('确定删除此管理员吗?', '提示', {
          confirmButtonText: '确定' ,
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          interfaceList.deleteUser({
            idAry:this.rightCheck
          }).then(res =>{
            // console.log(res)
            if(res.code === 200) {
              if(this.userList.length !== 0){
                this.userList = []
                this.value = []
                this.getSuperLists()
              }
              this.getLists()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }else{
              this.$message.error(res.msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    delLeftUser(){
      // console.log(this.leftCheck)
      if(this.leftCheck.length !== 0){
        this.$confirm('确定删除此超级管理员吗?', '提示', {
          confirmButtonText: '确定' ,
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          interfaceList.deleteUser({
            idAry:this.leftCheck
          }).then(res =>{
            // console.log(res)
            if(res.code === 200) {
              if(this.userList.length !== 0){
                this.userList = []
                this.value = []
                this.getLists()
              }
              this.getSuperLists()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }else{
              this.$message.error(res.msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    rightCheckChange(val){
      // console.log(val)
      this.rightCheck = val
    },
    LeftCheckChange(val){
      this.leftCheck = val
    },
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
      if(direction === 'left'){
        interfaceList.upUser({
          idAry:movedKeys
        }).then(res=>{
          // console.log(res)
          if(res.code === 200){
            if(this.userList.length !== 0){
              this.userList = []
              this.value = []
            }
            this.getLists()
            this.getSuperLists()
          }
        })
      }else{
        interfaceList.lowUser({
          idAry:movedKeys
        }).then(res=>{
          // console.log(res)
          if(res.code === 200){
            if(this.userList.length !== 0){
              this.userList = []
              this.value = []
            }
            this.getLists()
            this.getSuperLists()
          }
        })
      }
    },
    sureAddUser(){
      // console.log(this.ruleForm)
      this.dialogFormVisible = false
      interfaceList.addUser({
        username: this.ruleForm.name,
        password: this.ruleForm.pass
      }).then(res=> {
        // console.log(res)
        if(res.code === 200) {
          if(this.userList.length !== 0){
            this.userList = []
            this.value = []
          }
          this.getLists()
          this.getSuperLists()
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.$refs.ruleForm.resetFields()
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    cancelAdd(){
      this.dialogFormVisible = false
      this.$refs.ruleForm.resetFields()
    }
  },
  created(){
    this.getLists()
    this.getSuperLists()
  }
}
</script>


<style lang="scss" scoped>
  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
  .transfer-footer2 {
    margin-left: 190px;
    padding: 6px 5px;
  }
  .addmodal{
    position: relative;
    top: 0;
    right: 60px;
  }
</style>
<style>
  .el-transfer-panel{
    width: 300px;
    height: 100%;
  }
  .el-transfer-panel__list.is-filterable{
    height: 294px;
  }
</style>